<template>
	<z-paging ref="paging" v-model="searchData" @query="queryList" :show-loading-more-no-more-view="false" :auto="false" :default-page-size="15"  :hide-empty-view="!searchval">
		<template slot="top">
			<cl-navbar autoBack placeholder :autoBack="false" leftIcon="">
				<view slot="center" class="navView">
					<view class="searchview">
						<u-search :inputStyle="{fontSize:'24rpx'}" :showAction="false" height="64rpx" :clearabled="false"
							bgColor="#1e1f30" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
					</view>
					<span @click="backpage" style="font-size: 32rpx;">{{$t("common.cancelText")}}</span>
				</view>
			</cl-navbar>
		</template>
		<view v-if="searchval" style="padding: 0 30rpx;">
			<view v-for="(item, index) in searchData" :key="index" style="margin-top: 30rpx;">
				<view class="content">
					<cl-avatar :src="isMe(item.sender_id) ? user_info.avatar_url : chatInfo.avatar_url"
						size="100rpx"></cl-avatar>
					<view style="margin-left: 20rpx;flex: 1;" @click="chatGo(item)">
						<view style="font-size: 24rpx;color: #595A66;display: flex;justify-content: space-between;margin-bottom: 10rpx;">
							<span>{{isMe(item.sender_id) ? user_info.nick_name : chatInfo.nickname}}</span>
							<span>{{formatSendTime(item.create_time)}}</span>
						</view>
						<rich-text :nodes="messageText(item.content_text[0].text.content)" :selectable="false" style="white-space: pre-wrap;font-size: 28rpx;color:#FFFFFF;"></rich-text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="searchContentBtn" v-else>
			<span>{{$t("chat.msg.type.searchTitle")}}</span>
			<view class="searchtypeView">
				<span class="searchtypeViewItem" @click="gopage('chat_history_mixed')">{{$t("chat.msg.type.photoVideo")}}</span>
				<span class="searchtypeViewItem" @click="gopage('chat_history_audio')">{{$t("chat.msg.type.audio")}}</span>
				<span class="searchtypeViewItem" @click="gopage('chat_history_mp')">{{$t("chat.msg.type.b_c")}}</span>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import msgSqlite from '@/sqlite_services/msg.js'
	import {
		mapState
	} from 'vuex'
	import {
		replaceEmojis
	} from '@/components/cl-chat-input/o-emoji/emoji.js';
	import {formatSendTime} from '@/common/chatMsgTime.js'
	export default {
		name: 'chatHistory',
		data() {
			return {
				searchval:'',
				searchData:[],
			}
		},
		computed: {
			...mapState({
				chatInfo: state => state.chat.chatInfo,
				user_info: state => state.user.user_info,
			}),
			isMe() {
				return (uuid) => {
					if (uuid == this.user_info.user_id) return true
					return false
				}
			},
			messageText() {
				return (text) => {
					return replaceEmojis(text)
				}
			},
		},
		onLoad() {
				console.log(this.chatInfo);
		},
		methods: {
			formatSendTime,
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
					if(this.searchval){
						this.getSearch()
					}else{
						this.$refs.paging.complete();
					}
				}, 500,false)
			},
			getSearch(){
				this.$refs.paging.reload()
			},
			chatGo(item){
				// this.$Router.back(2)
				// uni.$emit('onChatHistory',item.msg_id)
			},
			backpage(){
				this.$Router.back()
			},
			gopage(name){
				this.$Router.push({
					name
				});
			},
			//
			queryList(pageNo, pageSize){
				let offset = this.searchData.length
				if(pageNo == 1){
					offset = 0
				}
				msgSqlite.getMsgSortList({
					chat_type:'private',
					msg_type:'text',
					uuid:this.chatInfo.uuid,
					search:this.searchval,
				},{
					pageSize,
					offset
				}).then(results => {
					console.log(results);
					if (results) {
						results.map(result => {
							result.content_text = JSON.parse(result.content_text)
						});
						this.$refs.paging.complete(results);
					}
				}).catch(e => {
					this.$refs.paging.complete(false);
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.navView{
		display: flex;
		align-items: center;
		width: 750rpx;
		padding-right: 40rpx;
		.searchview {
			flex: 1;
			margin: 20rpx 30rpx;
			background-color: #1e1f30;
			border-radius: 60rpx;
			
		}
	}
	.searchContentBtn{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200rpx;
		color: #6a6b76;
		font-size: 32rpx;	
		.searchtypeView{
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			color: #FFFFFF;
			.searchtypeViewItem{
				margin: 0 30rpx;
			}
		}
	}
	.content{
		display: flex;
		align-items: center;
	}
</style>